<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}门店`"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    class="store-form"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading" :style="{ padding: '0 50px' }">
      <a-form :form="form" v-bind="formLayout">
        <a-row>
          <a-col :span="24">
            <a-form-item v-show="false" label="主键ID" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="新增类型" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-radio-group v-model="storeType">
                <a-radio-button value="store">门店</a-radio-button>
                <a-radio-button value="net_dot"></a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="10" :style="{ marginLeft: '-4px' }">
            <a-form-item label="请选择省" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
              <a-select v-decorator="['provinceid']" placeholder="请选择省" @change="onProvinceChange">
                <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.id">{{
                  item.province
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-select v-decorator="['cityid']" placeholder="请选择市" @change="onCityChange">
                <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.id">{{
                  item.city
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-select
                v-decorator="['areaid']"
                placeholder="请选择区"
                @change="
                  onAreaChange({
                    areaid: $event,
                    provinceid: form.getFieldValue('provinceid'),
                    cityid: form.getFieldValue('cityid')
                  })
                "
              >
                <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.id">{{
                  item.area
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-show="storeType === 'net_dot'">
            <a-form-item label="所属门店" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-select v-decorator="['pid']" placeholder="所属门店">
                <a-select-option :value="item.pid" v-for="item in clothesList" :key="item.pid">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="详细地址" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-input v-decorator="['address']" placeholder="详细地址" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="门店名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-input v-decorator="['name']" placeholder="门店名称" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="门店电话" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-input v-decorator="['mobile']" placeholder="门店电话" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="图片" class="form-header" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload v-decorator="['img_url', { initialValue: '' }]"> </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="14">
            <a-form-item label="营业时间" :labelCol="{ span: 7 }" :wrapperCol="{ span: 16 }">
              <a-time-picker v-decorator="['atime']"></a-time-picker>
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-time-picker v-decorator="['etime']"></a-time-picker>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="营业状态" :labelCol="{ span: 4 }" :wrapperCol="{ span: 9 }">
              <a-select v-decorator="['status']" placeholder="请选择是否开始营业">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="参加抖音活动" :labelCol="{ span: 5 }" :wrapperCol="{ span: 9 }">
              <a-select v-decorator="['is_join']" placeholder="请选择是否参加抖音活动">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { provinceLink, cityLink, areaLink, stores } from '@/api/notControl'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = [
  'name',
  'areaid',
  'cityid',
  'id',
  'provinceid',
  'address',
  'mobile',
  'status',
  'atime',
  'etime',
  'img_url',
  'pid',
  'is_join'
]

export default {
  mixins: [formModalMixin],
  props: {
    editAction: {
      type: Function,
      default: () => {}
    },
    addAction: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    this.fields = fields
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      clothesList: [],
      storeType: 'store',
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  created () {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    watchBefore (model) {
      const { provinceid, cityid, area, province, city, pid } = model
      if (pid) {
        this.storeType = 'net_dot'
      }
      return Promise.all([
        // this.detailAction({ id: model.id }),
        this.onProvinceChange(provinceid),
        this.onCityChange(cityid),
        this.onAreaChange({ province, city, area, pid })
      ])
    },
    onProvinceChange (provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.form.setFieldsValue({ cityid: undefined })
      })
    },
    onCityChange (cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.form.setFieldsValue({ areaid: undefined })
      })
    },
    onAreaChange ({ areaid, provinceid, cityid, province: provinceA, city: cityA, area: areaA, pid = 0 }) {
        const province = provinceA || this.provinceList.find(province => province.provinceid === provinceid).province
        const city = cityA || this.cityList.find(city => city.cityid === cityid).city
        const area = areaA || this.areaList.find(area => area.areaid === areaid).area
        return stores({ province, city, area, pid }).then(res => {
          this.clothesList = res.data.clothes
        })
    },
    handleOkBefore (values) {
      const province = this.provinceList.find(province => province.provinceid === values['provinceid'])
      const city = this.cityList.find(city => city.cityid === values['cityid'])
      const area = this.areaList.find(area => area.areaid === values['areaid'])
      const params = {
        ...values,
        province: (province && province.province) || undefined,
        city: (city && city.city) || undefined,
        area: (area && area.area) || undefined
      }
      return params
    }
  }
}
</script>
<style lang="less" scoped>
.store-form {
  /deep/.ant-modal-body {
    padding: 24px 48px;
  }
  /deep/.ant-time-picker {
    width: 100%;
  }
  /deep/.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0;
  }
}
</style>
